<template>
  <fl-navBar
    dark
    :border="false"
    title="成绩查询"
    left-icon="left"
    color="#333333"
    :fixed="true"
    background-color="#fff"
    status-bar
  />
  <view class="achievement">
    <view class="filter_data">
      <view class="filter_item">
        <zxz-uni-data-select
          :clear="false"
          label="学期"
          @change="getList"
          placeholder="选择学期"
          v-model="queryParams.semesterInfoId"
          :localdata="filter(semesterList, 'id', 'name')"
        />
      </view>
      <view class="filter_item">
        <zxz-uni-data-select
          :clear="false"
          label="类型"
          @change="getList"
          placeholder="考试类型"
          v-model="queryParams.examinationType"
          :localdata="filter(dicList, 'dictValue', 'dictLabel')"
        />
      </view>
    </view>
    <view class="achievement_content">
      <!-- <view class="filterBtn">
        <text class="filter iconfont icon-shaixuan"></text>
      </view> -->
      <view class="filter_item">
        <!-- <view class="teacherUser" @tap="handleSelectCourse">{{
          queryParams.teacherUserName ? queryParams.teacherUserName : "点击选择课程"
        }}</view> -->
        <zxz-uni-data-select
          v-if="typeUser === '2'"
          :clear="false"
          style="width: 60%; margin: 20rpx auto 10rpx"
          label="课程"
          @change="getList"
          placeholder="课程"
          v-model="queryParams.courseId"
          :localdata="filter(coursesList, 'courseId', 'courseName')"
        />
      </view>
      <view v-if="scoresList.length > 0">
        <view class="ach_class"
          >{{ scoresObj.studentName }} {{ scoresObj.className }}</view
        >
        <view class="ach_title"
          >{{ scoresObj.semesterName }}{{ scoresObj.examinationTypeStr }}</view
        >
      </view>
      <scroll-view
        @scrolltolower="scrolltolower"
        class="achievement_scroll_view"
        scroll-y
      >
        <view v-if="typeUser === '2'">
          <view
            v-if="scoresList.length > 0"
            :class="index % 2 == 0 ? 'odd achievement_item' : 'achievement_item'"
            v-for="(ele, index) in scoresList"
            :key="index"
          >
            <view class="mc">第{{ index + 1 }}名</view>
            <view class="mc_name">{{ ele.studentName }}</view>
            <view class="mc_score">{{ ele.score }} 分</view>
          </view>
          <fl-empty v-else />
        </view>
        <!-- 个人课表 -->
        <view v-if="typeUser === '1'">
          <view
            v-if="scoresList.length > 0"
            :class="index % 2 == 0 ? 'odd achievement_item' : 'achievement_item'"
            v-for="(ele, index) in scoresList"
            :key="index"
          >
            <view class="mc_name">{{ ele.courseName }}</view>
            <view class="mc_score">{{ ele.score }}分</view>
          </view>
          <view class="achievement_item" v-if="scoresList.length > 0">
            <view class="mc_name allscore">
              总分: <text class="score">{{ scoreSum }}分</text></view
            >
            <view class="mc_score"></view>
          </view>
          <fl-empty v-else />
        </view>
      </scroll-view>
    </view>
  </view>
  <view>
    <!-- <view v-if="courseShow">
      <fl-coursesList :show="courseShow" />
    </view> -->
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { semesterInfoList } from "@/api/courseSchedule/index";
import { studentScoreList, getCourseList, classScoreList } from "@/api/achievement/index";
import { dict } from "@/api/dict";
const queryParams = ref({
  semesterInfoId: "",
  examinationType: "",
  courseId: "",
});
const scoresObj = ref({});
const scoresList = ref([]);
const dicList = ref([]);
const scoreSum = ref(0);
const courseShow = ref(false);
const semesterList = ref([]);
const coursesList = ref([]);
const typeUser = ref("");
async function getList() {
  let list;
  if (typeUser.value === "1") {
    // 学生个人成绩
    let res = await studentScoreList(queryParams.value);
    list = res.data;
  } else {
    // 班级课表
    let res = await classScoreList(queryParams.value);
    list = res.rows;
  }
  if (list.length > 0) {
    scoresObj.value = list[0];
    scoresList.value = list;
    let sum = 0;
    list.forEach((v) => {
      sum += Number(v.score);
    });
    scoreSum.value = sum;
  } else {
    scoresList.value = [];
  }
}
// 学期列表 模糊搜索条件
async function getsSemesterInfoList() {
  let par = {
    pageNum: 1,
    pageize: 999,
  };
  const res = await semesterInfoList(par);
  queryParams.value.semesterInfoId = res.data[0].id;
  semesterList.value = res.data;
  // 获取考试类型字典
  const dic = await dict("examination_type");
  dicList.value = dic.data;
  queryParams.value.examinationType = dic.data[0].dictValue;
  // 获取课程 列表 数据   班级课表才会显示
  if (typeUser.value === "2") {
    const response = await getCourseList();
    coursesList.value = response.data;
    queryParams.value.courseId = response.data[0].courseId;
    // console.log(JSON.parse(re));
  }
  getList();
}
function filter(arr, value, label) {
  let newArr = [...arr];
  newArr.forEach((v) => {
    v.text = v[label];
    v.value = v[value];
  });
  return newArr;
}
function handleSelectCourse() {
  courseShow.value = true;
}
onLoad((options) => {
  typeUser.value = options.type;
  getsSemesterInfoList();
});
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .teacherUser {
    display: flex;
    align-items: center;
    width: 40%;
    margin: 10rpx auto;
    height: 70rpx;
    border-radius: 5rpx;
    color: #6a6a6a;
    font-size: 24rpx;
    border: 1px solid #e5e5e5;
    padding-left: 20rpx;
  }

  .achievement {
    display: flex;
    flex-direction: column;
    height: 100%;

    .filter_data {
      display: flex;
      justify-content: space-around;
      background-color: #ffffff;
      height: 120rpx;
      .filter_item {
        display: flex;
        align-items: center;
        width: 40%;
      }
    }

    .odd {
      background-color: #f5f5f5 !important;
    }

    .headFilter {
      width: 100%;
      height: 40px;
    }

    .achievement_content {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 700rpx;
      height: 100%;
      background-color: #fff;
      color: #000;
      margin: 0 auto;
      box-shadow: 0 0 12rpx 0 rgba(209, 209, 209, 0.5);
      border-radius: 10rpx;
      margin-top: 20rpx;
      .filterBtn {
        position: absolute;
        right: 0;
        width: 80rpx;
        height: 80rpx;
        z-index: 9;
        text-align: center;
        line-height: 100rpx;
        top: 0;
        .filter {
          font-size: 40rpx;
          color: #333333;
        }
      }

      .ach_class,
      .ach_title {
        font-size: 30rpx;
        text-align: center;
        margin: 25rpx 0;
      }

      .ach_title {
        margin: 0px 0 30rpx 0;
      }

      .achievement_scroll_view {
        flex: 1;
        height: calc(100vh - 550px);
        // overflow: hidden;

        .achievement_item {
          width: 90%;
          margin: 0 auto;
          display: flex;
          align-items: center;

          .mc,
          .mc_name,
          .mc_score {
            flex: 1;
            height: 96rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
          }
          .allscore {
            font-size: 30rpx;
            padding-left: 50rpx;
            display: flex;
            align-items: center;
            text {
              padding-left: 20rpx;
            }
            .score {
              font-size: 34rpx;
              color: #fb9825;
            }
          }

          .mc_score {
            color: #0d80d7;
          }
        }
      }
    }
  }
}
</style>
